<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <meta name="description"
        content="小兔鲜儿-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
    <!-- 引入ico标签 -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="css/base.css">
    <!-- <script src="js/detail.js"></script> -->
</head>

<body>
    <!-- 产品开始 -->
    <div class="product ">
        <div class="clearfix">
            <div class="product-info">
                <div class="small-box">
                    <img src="./images/9.jpg" alt="" class="small-img">
                    <!-- 放大镜 -->
                    <div class="glass">

                    </div>
                    <!-- 大盒子 -->
                    <div class="big-box">
                        <img src="./images/9.jpg" alt="">
                    </div>
                </div>
                <div class="product-list">
                    <a href="javascript:;" class="arrow-prev"></a>
                    <a href="javascript:;" class="arrow-next"></a>
                    <div class="list-info">
                        <ul>
                            <li class="img-hover">
                                <img src="./images/9.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/10.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/11.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/12.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/13.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/14.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/15.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/16.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/17.jpg" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="introduce">
                    <h3>海贼王路飞手办动漫模型</h3>
                    <div class="money">￥<span>199</span></div>
                    <div>发货:<span>日本</span></div>
                    <div>状态:<span>现货</span></div>
                    <div>热门系列:<span>Figuarts Zero</span></div>
                    <div>售后保障：<span>七天无理由退换</span></div>

                </div>
                <div class="recommend_first fl">
                    <a href="#" id="recom">
                        <div class="recom_title">臻品秒杀</div>
                        <h4>距离结束本场结束还有</h4>
                        <div class="recom_time">
                            <div class="time_num hour">01</div>
                            <span class="time_point">:</span>
                            <div class="time_num minute">20</div>
                            <span class="time_point">:</span>
                            <div class="time_num second">40</div>
                        </div>
                    </a>

                </div>
            </div>


        </div>
    </div>


    <!-- 返回页面顶部 -->
    <div>
        <a href="detail.html" class="back-top clearfix"></a>
    </div>
    <script src="js/detail.js"></script>
    <script>
        //倒计时动画
        function animate(obj, target) {
            var timer = setInterval(function () {
                var step = Math.ceil((target - obj.offsetLeft) / 10);
                if (obj.offsetLeft >= target) {
                    clearInterval(timer);
                }
                //把每次加1编程一个慢慢变小的值，步长公式：（目标值-现在的位置）10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
        var dd = document.getElementById('recom');
        animate(dd, 750);
    </script>
</body>

</html>